<template>
	<view>
		<template v-if="dataList.length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="content-top">
					<view class="search-bar">
						<input type="text" placeholder="搜索你需要的机型" @blur="blur" @focus="focus" v-model:value="keyword">
						<image src="../../static/images/sear.png" mode=""></image>
					</view>
					<template v-if="isShow">
						<view class="nav-bar box-flex">
							<block v-for="(item,index) in dataList" :key="index">
								<view class="nav-item " :class="{selected:tabIndex==index}" @click="getNavItem(index)">
									<view class="item-main">
										{{item.category_name}}
									</view>
								</view>
							</block>
						</view>
					</template>
				</view>
				<template v-if="isShow">
					<view class="fix-ui-box">
						<view class="content-left">
							<view class="side-bar">
								<block v-for="(item,index) in brandList" :key="index">
									<view class="side-item  el-flex" :class="{selected:brandIndex==index}"
										@click="getBrandItem(index)">
										<view class="brand">
											{{item.brand_name}}
										</view>
									</view>
								</block>
			
							</view>
						</view>
						<view class="content-right">
							<view class="phone-list">
			
								<view class="phone-item" v-for="(item,index) in list" :key="index" @click="toDeviceInfo(item)">
									<view class="box">
										<text class="count" :class="{first:index==0,second:index==1,third:index==2}">
											{{index+1}}
										</text>
										<text class="text">{{item.name}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
			
				</template>
				<template v-if="!isShow">
					<view class="content-bottom">
						<view class="search-results">
							<view class="results-list">
								<view class="results-item" v-for="(item,index) in searchList" @click="getSearchItem(item)"
									:key="index">
									<text>{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				tabIndex: 0,
				brandIndex: 0,
				list: [],
				keyword: '',
				isShow: true,
				searchList: [],
				tabId: ''
			};
		},
		computed: {
			brandList() {
				return this.dataList[this.tabIndex] && this.dataList[this.tabIndex].brands
			},
			category_id() {
				return this.dataList[this.tabIndex] && this.dataList[this.tabIndex].category_id
			},
			brand_id() {
				return this.brandList && this.brandList[this.brandIndex].brand_id
			}
		},
		watch: {
			keyword(newVal) {
				this.getProductSearch(newVal)
			},
		},
		methods: {
			focus() {
				this.isShow = false
			},
			blur() {
				setTimeout(() => {
					this.isShow = true
				}, 100)
			},
			getSearchItem(item) {
				if (item && !item.id) return;
				uni.navigateTo({
					url: `/secPage/deviceInfo/deviceInfo?id=${item.id}&name=${item.name}`
				})
			},
			getProductSearch(key) {
				this.$request.get('/getProductSearch', {
					'keyword': key,
				}).then((res) => {
					this.searchList = res.data.data.list
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			toDeviceInfo(item) {
				if (item && !item.id) return;
				uni.navigateTo({
					url: `/secPage/deviceInfo/deviceInfo?id=${item.id}&name=${item.name}`
				})

			},
			getBrandItem(index) {
				if (this.brandIndex == index) return;
				this.brandIndex = index
				this.getProductList(this.category_id, this.brand_id)
			},
			getNavItem(index) {
				if (this.tabIndex == index) return;
				this.tabIndex = index;
				this.brandIndex = 0
				this.getProductList(this.category_id, this.brand_id)
			},
			getProductList(category_id, brand_id) {
				this.$request.get('/getProductList', {
					'category_id': category_id,
					'brand_id': brand_id,
				}).then((res) => {
					this.list = res.data.data.list
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getCategoryList() {
				this.$request.get('/getCategoryList').then((res) => {
					this.dataList = res.data.data
					if (this.tabId) {
						let index = this.dataList.findIndex(item => {
							return item.category_id == this.tabId
						})
						this.tabIndex = index
					}
					this.getProductList(this.category_id, this.brand_id)
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.getCategoryList()
			this.tabId = e.tab
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.content-top {
		position: relative;
		z-index: 4;

		.search-bar {
			padding: 0.16rem 0.34rem;
			background: #fff;
			position: relative;

			input {
				padding: 0.16rem 0.6rem;
				border: none;
				font-size: .24rem;
				line-height: 1;
				background: #f2f2f2;
				border-radius: 0.2rem;
				outline: none;
			}

			image {
				left: 0.5rem;
				width: 0.32rem;
				height: 0.32rem;
				position: absolute;
				top: 0.32rem;
			}
		}

		.nav-bar {
			background: #fff;
			border-bottom: 1px solid #e5e5e5;
			padding: 0.2rem 0;
			overflow-x: auto;
			display: flex;

			.nav-item {
				position: relative;
				white-space: nowrap;
				padding: 0 0.15rem;
				display: inline;
				width: 100%;
				-webkit-box-flex: 1;
				flex: 1 1 auto;

				.item-main {
					display: inline-block;
					margin: 0 auto;
					font-size: .28rem;
					text-align: center;
					padding: 0.06rem 0.24rem 0.08rem;
					color: #333;
				}

			}

			.selected {
				.item-main {
					color: #fff;
					border-radius: 0.5rem;
					background: #f56600;
				}
			}
		}
	}

	.fix-ui-box {
		position: absolute;
		height: 100%;
		width: 100%;

		.content-left {
			z-index: 2;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;

			.side-bar {
				transform: translateZ(0);
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				height: 101%;
				width: 1.96rem;
				background: #f7f7f7;

				.side-item {
					flex-direction: column;
					width: 1.96rem;
					height: 1.16rem;

					.brand {
						font-size: .28rem;
						line-height: 1.2;
						text-align: center;
						width: 100%;
						word-break: break-word;
						white-space: pre-wrap;
						color: rgba(0, 0, 0, .5);
					}
				}

				.selected {
					background: #fff;

					.brand {
						color: rgb(0, 0, 0);
					}
				}
			}
		}

		.content-right {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			overflow: hidden;

			.phone-list {
				position: relative;
				transform: translateZ(0);
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				padding-bottom: 2rem;
				height: 101%;
				width: 5.24rem;
				-webkit-box-flex: 1;

				.phone-item {
					text-align: left;
					padding-left: 0.48rem;
					list-style-type: none;
					vertical-align: middle;
					font-size: .32rem;

					.box {
						display: flex;
						font-size: .29rem;
						color: #333;
						padding: 0.3rem 0;
						align-items: center;

						.count {
							display: inline-block;
							width: 0.36rem;
							height: 0.36rem;
							text-align: center;
							border-radius: 0.04rem;
							background: rgb(224, 224, 224);
							font-size: .2rem;
							color: #fff;
							margin-right: 0.28rem;
							line-height: .36rem;
						}

						.first {
							background: rgb(255, 89, 52);
						}

						.second {
							background: rgb(255, 142, 52);
						}

						.third {
							background: rgb(255, 184, 52);
						}

						.text {
							vertical-align: middle;
							line-height: .5rem;
						}
					}
				}
			}
		}
	}

	.content-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		top: 1rem;
		overflow: hidden;
		background: #fff;

		.search-results {
			overflow-y: auto;
			height: 101%;

			.results-list {
				position: relative;

				.results-item {
					padding-left: 0;
					vertical-align: middle;
					text-align: left;

					text {
						color: #3c3c3c;
						padding-left: 0.32rem;
						box-sizing: border-box;
						display: block;
						font-size: .32rem;
						line-height: 1.04rem;
						border-bottom: 1px solid #e5e5e5;
					}
				}
			}
		}
	}
</style>